﻿
@{
    ViewData["Title"] = "用户管理";
}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" id="form-val-filter" lay-filter="form-val-filter">
            <div class="layui-inline">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="" class="layui-input">
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-panel">
    <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
            查询
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh">
            <i class="layui-icon layui-icon-refresh"></i>
            重置
        </button>

    </div>
</script>

<script type="text/html" id="ID-dropdown-user-table-tool">
    <a class="layui-btn layui-btn-xs" lay-event="more">操作 <i class="layui-icon layui-icon-down"></i></a>
</script>

@section Scripts {
    <script type="text/javascript">
        layui.use(function () {
            var table = layui.table;
            var form = layui.form;
            var dropdown = layui.dropdown;
            var $ = layui.$;

            // 创建渲染实例
            table.render({
                elem: '#userTable',
                url: '/System/user/Search', // 此处为静态模拟数据，实际使用时需换成真实接口
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                height: 'full-200', // 最大高度减去其他容器已占有的高度差
                cellMinWidth: 80,
                page: true,
                cols: [[
                    // { type: 'checkbox', fixed: 'left' },
                    { field: 'id', fixed: 'left', title: 'ID', hide: true },
                    { field: 'name', title: '账号' },
                    { field: 'userName', title: '用户名称' },
                    { field: 'phoneNumber', title: '手机号' },
                    { field: 'phoneNumberConfirmed', title: '手机验证' },
                    { field: 'email', title: '邮箱' },
                    { field: 'emailConfirmed', title: '邮箱验证' },
                    { field: 'isActive', title: '是否启用' },
                    { field: 'creationTime', title: '创建时间' },
                    { fixed: 'right', title:'操作', toolbar: '#ID-dropdown-user-table-tool', width:150}
                ]],
                request: {
                    pageName: 'skipCount ', // 页码的参数名称，默认：page
                    limitName: 'maxResultCount ' // 每页数据条数的参数名，默认：limit
                },
                before: function (options) {
                    // options.where.DestinationArea = $('#DestinationArea')[0].value;
                },
                error: function (res, msg) {
                    console.log(res, msg)
                }
            });

            // 工具栏事件
            table.on('toolbar(userTable)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);

                if(obj.event === 'more'){
                        // 更多下拉菜单
                        dropdown.render({
                        elem: that,
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: 'item 1',
                            id: 'aaa'
                        }, {
                            title: 'item 2',
                            id: 'bbb'
                        }, {
                            title: '删除',
                            id: 'del'
                        }],
                        click: function(data, othis){
                            //根据 id 做出不同操作
                            if(data.id === 'del'){
                            layer.confirm('真的删除行么', function(index){
                                obj.del();
                                layer.close(index);
                            });
                            } else {
                            layer.msg('得到表格下拉菜单 id：'+ data.id);
                            }
                        },
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                        })
                    }

                switch (obj.event) {
                    case 'search':
                        search();
                        break;
                    case 'refresh':
                        refresh();
                        break;
                    case 'syncData':
                        syncData();
                        break;
                    case 'add':
                        add();
                        break;
                    case 'batchDelete':
                        batchDelete(checkStatus.data);
                        break;
                };
            });

            // 触发单元格工具事件
            table.on('tool(userTable)', function (obj) {
                let data = obj.data; // 获得当前行数据
                if (obj.event === 'edit') {
                    edit(data);
                } else if (obj.event === 'delete') {
                    batchDelete([data]);
                } else if (obj.event === 'detail') {
                    detail(data);
                }
            })

            function search() {
                let data = form.val('form-val-filter');
                table.reloadData('userTable', {
                    where: data,
                    scrollPos: true,
                });
            }

            function refresh() {
                $("#form-val-filter")[0].reset();
                table.reloadData('userTable', {
                    where: {},
                });
            }

            function add() {
                layer.open({
                    title: '新增',
                    type: 1,
                    area: ['600px', '80%'],
                    content: $('#ID-layer-addOrEdit'),
                    btn: ['保存', '取消'],
                    yes: function (index, layero, that) {
                        var isValid = form.validate('#form-addOrEdit-filter')
                        if (!isValid) {
                            return false;
                        }
                        let data = form.val('form-addOrEdit-filter');
                        data.disable = data.disable === 'on' ? false : true;
                        $.post('Add', data).done(function (result) {
                            if (result.code === 0) {
                                table.reloadData('userTable');
                                layer.msg(result.msg, { icon: 1 });
                                layer.close(index);
                            } else {
                                layer.msg(result.msg, { icon: 2 });
                            }
                        }).fail(function (xhr, status, error) {
                            layer.msg(`操作失败，状态码${xhr.status}，${error}`, { icon: 2 });
                        })
                        return false;
                    },
                    end: function () {
                        //关闭后的回调
                        $("#form-addOrEdit-filter")[0].reset();
                    }
                });
            }

            function edit(data) {
                form.val('form-addOrEdit-filter', data);
                $('#switchDisable')[0].checked = data.disable == false;
                layer.open({
                    title: '编辑 - id:' + data.id,
                    type: 1,
                    area: ['600px', '80%'],
                    content: $('#ID-layer-addOrEdit'),
                    btn: ['保存', '取消'],
                    yes: function (index, layero, that) {
                        var isValid = form.validate('#form-addOrEdit-filter')
                        if (!isValid) {
                            return false;
                        }
                        let data = form.val('form-addOrEdit-filter');
                        data.disable = data.disable === 'on' ? false : true;
                        $.post('Update', data).done(function (result) {
                            if (result.code === 0) {
                                table.reloadData('userTable');
                                layer.msg(result.msg, { icon: 1 });
                                layer.close(index); // 关闭弹层
                            } else {
                                layer.msg(result.msg, { icon: 2 });
                            }
                        }).fail(function (xhr, status, error) {
                            layer.msg(`操作失败，状态码${xhr.status}，${error}`, { icon: 2 });
                        })
                        return false;
                    },
                    end: function () {
                        //关闭后的回调
                        $("#form-addOrEdit-filter")[0].reset();
                    }
                });
            }

            function detail(data) {
                layer.open({
                    type: 2,
                    title: `${data.name} - 设备属性`,
                    shadeClose: true,
                    maxmin: true,
                    area: ['80%', '80%'],
                    content: `../EquipmentProp/Index?id=${data.id}`
                });
            }
        });
    </script>
}